<script setup name="worksAdd">
import { ref, computed } from "vue";
import { useMyStore } from "../../store/index";

const props = defineProps(["showPageDeatil", "currentIndex", "closeEditing"]);

const currentIx = ref(0);
const pageIndex = useMyStore().pageIndex;
const store = useMyStore();
const item = ref(useMyStore().customArtwork.pageContent[pageIndex]);
const currentEffectIndex = ref(0);
const showJumpPage = ref(false);
const total = ref("");
const swiperChecked = ref(0);

const animation = [
  { name: "无动画", className: "" },
  { name: "旋转", className: "swirl-in-bck" },
  { name: "横切", className: "slit-in-horizontal" },
  { name: "横入", className: "slide-in-blurred-left" },
  { name: "弹力", className: "bounce-in-top" },
  { name: "下滚", className: "roll-in-top" },
  { name: "模糊", className: "puff-in-center" },
];
const showTotal = ref(false);
const clickEffectText = ["无动作", "跳转页面", "弹提示"];

const pageText = computed(() => {
  return item.value[props.currentIndex].click.swiperIndex
    ? "页面" + (item.value[props.currentIndex].click.swiperIndex + 1)
    : " 跳转页面名称";
});
const afterRead = (file) => {
  if (!file) return;
  item.value[props.currentIndex].content = file.content;
};
const diaSubtEffect = (type) => {
  if (type == "total") {
    item.value[props.currentIndex].click.total = total.value;
    showTotal.value = false;
  } else {
    item.value[props.currentIndex].click.swiperIndex = swiperChecked.value;
    showJumpPage.value = false;
  }
  console.log(item.value);
};
const selectClickEffect = (index) => {
  showJumpPage.value = false;
  currentEffectIndex.value = index;
  if (currentEffectIndex.value == 2) {
    showTotal.value = true;
  }
};

const onSelectAnimation = (index) => {
  currentIx.value = index;
  item.value[props.currentIndex].etranceAnimation = animation[index].className;
};
const deleteImageItem = () => {
  console.log(props.currentIndex, "props.currentIndex");
  item.splice(props.currentIndex, 1);
  store.closeEditing();
};
</script>
<template>
  <van-action-sheet :overlay="false" v-model:show="props.showPageDeatil">
    <div class="bottom-sheet">
      <van-uploader :after-read="afterRead" :preview-image="false">
        <van-cell is-link>
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <img src="./image/genghuanmoban.png" class="GHmoban" alt="" />
            更换文件
          </template>
        </van-cell>
      </van-uploader>

      <div class="material-name" style="border: 1px solid #ff6464">
        <span>素材名称</span>
        <van-field
          placeholder="请输入素材名称"
          v-model="item[props.currentIndex].worksName"
        />
      </div>
      <div class="material-name no-transparency">
        <span>不透明度</span>
        <div class="slider">
          <van-slider
            max="1"
            min="0"
            step="0.01"
            v-model="item[props.currentIndex].style.opacity"
            active-color="linear-gradient(90deg, #dffabc 0%, #87f4df 100%)"
          >
            <template #button>
              <div class="custom-button"></div>
            </template>
          </van-slider>
        </div>
      </div>
      <div class="click-effect">
        <div class="click-item">
          <span>点击效果</span>
          <div class="click-right">
            <div
              v-for="(item2, index) in clickEffectText"
              :key="index"
              :class="currentEffectIndex == index ? 'active-lig' : ''"
              @click="selectClickEffect(index)"
            >
              {{ item2 }}
            </div>
          </div>
        </div>
        <div
          style="display: flex; justify-content: flex-end"
          v-if="currentEffectIndex == 1"
        >
          <div class="setUp">
            <div>
              <img class="edit-img" src="@/assets/tiaozhuan.png" alt="" />
              {{ item[currentIndex].click.sw }}
            </div>
            <div @click="showJumpPage = true">
              <img class="border-img" src="@/assets/xian.png" alt="" />
              去设置
            </div>
          </div>
        </div>
      </div>
      <div class="animation">
        <div class="animation-item">
          <div>
            <div class="active-lig">入场动画</div>
          </div>
          <div class="animation-content">
            <div
              v-for="(item1, index) in animation"
              @click="onSelectAnimation(index)"
              :key="index"
              :class="currentIx == index ? 'active-lig' : ''"
            >
              {{ item1.name }}
            </div>
          </div>
        </div>
      </div>
      <div class="btn-bottom van-hairline--top">
        <div @click="deleteImageItem">删除</div>
        <div @click="store.closeEditing">保存</div>
      </div>
    </div>
  </van-action-sheet>
  <!-- 选择页面 -->
  <van-dialog v-model:show="showJumpPage" :showConfirmButton="false">
    <div class="dialog-warp">
      <span>请选择点击按钮后要跳转至哪个页面</span>
      <div class="dialog-content">
        <van-radio-group
          v-model="swiperChecked"
          v-if="useMyStore().customArtwork.pageContent.length > 1"
        >
          <van-radio
            :name="index"
            label-position="left"
            :disabled="index == pageIndex"
            v-for="(_, index) in useMyStore().customArtwork.pageContent"
            :key="index"
            >{{ "页面" + (index + 1) }}</van-radio
          >
        </van-radio-group>
        <div class="no-page" v-else>
          {{ "页面" + useMyStore().customArtwork.pageContent.length }}
        </div>
      </div>
      <span v-if="useMyStore().customArtwork.pageContent.length <= 1"
        >没有可选页面</span
      >
      <div class="dialog-btn-bottom">
        <div @click="showTotal = false">取消</div>
        <div @click="diaSubtEffect('swiper')">保存</div>
      </div>
    </div>
  </van-dialog>
  <!-- 提示 -->
  <van-dialog v-model:show="showTotal" :showConfirmButton="false">
    <div class="dialog-warp">
      <span>请选择点击按钮后要跳转至哪个页面</span>
      <div class="dialog-content">
        <van-field v-model="total" type="textarea" placeholder="请输入提示" />
      </div>
      <div class="dialog-btn-bottom">
        <div @click="showTotal = false">取消</div>
        <div @click="diaSubtEffect('total')">保存</div>
      </div>
    </div>
  </van-dialog>
</template>

<style lang="less" scoped>
.active-lig {
  background: linear-gradient(90deg, #dffabc 0%, #87f4df 100%) !important;
}
.dialog-warp {
  display: flex;
  flex-direction: column;
  padding: 0 30px;
  .no-page {
    height: 90px;
    background: #f8f8f8;
    border-radius: 16px;
    display: flex;
    align-items: center;
    font-size: 26px;
  }
  span {
    margin-top: 15px;
    font-size: 26px;
    color: #333333;
    font-size: 22px;
    color: #333333;
  }
  .dialog-content {
    margin-top: 24px;
    box-sizing: border-box;
    width: 521px;
    background: #f8f8f8;
    border-radius: 16px;
    padding: 0 22px 0 20px;
    :deep(.van-cell) {
      background-color: #f8f8f8 !important;
    }
    .van-radio {
      width: 100%;
      height: 90px;
      display: flex;
      justify-content: space-between;
    }
  }
  .dialog-btn-bottom {
    display: flex;
    margin-top: 21px;
    margin-bottom: 30px;
    div:nth-child(1) {
      flex: 1;
      height: 70px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: linear-gradient(90deg, #dffabc 0%, #87f4df 60%);
      border-radius: 16px;
      opacity: 0.5;
      border: 1px solid #87f4df;
      font-size: 28px;
      color: #49cb96;
      margin-right: 24px;
    }
    div:nth-child(2) {
      flex: 1;
      height: 70px;
      text-align: center;
      line-height: 70px;
      background: linear-gradient(90deg, #dffabc 0%, #87f4df 100%);
      border-radius: 16px;
      font-size: 28px;
      color: #000000;
    }
  }
}
.custom-button {
  width: 34px;
  height: 34px;
  background: linear-gradient(90deg, #dffabc 0%, #87f4df 100%);
  border: 1px solid #ffffff;
  border-radius: 50%;
}
.custom-button {
  width: 34px;
  height: 34px;
  background: linear-gradient(90deg, #dffabc 0%, #87f4df 100%);
  border: 1px solid #ffffff;
  border-radius: 50%;
}
:deep(.van-cell__title) {
  display: flex;
  align-items: center;
  .GHmoban {
    width: 22px;
    height: 22px;
    margin-right: 10px;
  }
}

.setUp {
  width: 506px;
  height: 60px;
  margin-top: 22px;
  box-sizing: border-box;
  padding: 0 21px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  div {
    display: flex;
    align-items: center;
  }
  .edit-img {
    width: 24px;
    height: 24px;
    margin-right: 12px;
  }
  .border-img {
    width: 1px;
    height: 28px;
    margin-right: 12px;
  }
}

.bottom-sheet {
  padding: 0 28px;
  :deep(.van-uploader) {
    width: 100%;
    .van-uploader__input-wrapper {
      width: 100%;
    }
  }
  .material-name {
    margin-top: 22px;
    font-size: 26px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 90px;
    background: #ffffff;
    border-radius: 16px;

    :deep(.van-slider, ) {
      width: 201px;
    }
    :deep(.van-field) {
      padding: 0;
      width: 255px;
    }
    .slider {
      display: flex;
      align-items: center;
    }
  }
  .no-transparency {
    background-color: #f8f8f8;
  }
  .click-effect {
    margin-top: 22px;
    font-size: 26px;
    padding: 27px 20px 16px;
    background: #f8f8f8;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    .click-item {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .click-right {
        display: flex;
        div {
          width: 156px;
          height: 60px;
          background: #ededed;
          border-radius: 16px;
        }
        div:nth-child(1) {
          width: 156px;
          height: 60px;
          background: #ededed;
          border-radius: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        > div:nth-child(2),
        div:nth-child(3) {
          width: 156px;
          height: 60px;
          margin-left: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 16px;
          font-size: 26px;
          color: #333333;
        }
      }
    }
  }
  .animation {
    // margin-bottom: 68px;
    .animation-item {
      margin-top: 20px;
      padding: 16px;
      background: #f8f8f8;

      div:first-child {
        display: flex;

        div {
          width: 156px;
          height: 60px;
          margin-bottom: 16px;
          font-size: 26px;
          background: #ededed;
          border-radius: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        div:nth-child(2) {
          margin-left: 10px;
        }
      }
      .animation-content {
        height: 120px;
        display: flex;
        div {
          width: 90px;
          height: 120px;
          margin-right: 16px;
          background: #ededed;
          font-size: 14px;
          border-radius: 16px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
  .btn-bottom {
    height: 223px;
    background: #ffffff;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding-top: 30px;
    div {
      width: 335px;
      height: 90px;
      font-size: 28px;
      border-radius: 16px;
      text-align: center;
      line-height: 90px;
    }
    div:first-child {
      background: linear-gradient(90deg, #dffabc 0%, #87f4df 100%);
      border-radius: 16px;
      border: 1px solid #87f4df;
      font-size: 28px;
      color: #49cb96;
      opacity: 0.6;
    }
    div:nth-child(2) {
      border-radius: 16px;
      background: linear-gradient(90deg, #dffabc 0%, #87f4df 100%);
      font-size: 28px;
      color: #000000;
    }
  }
}
</style>
